<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>8-阶段小结： Vue Router案例</title>
    <!-- 导入 vue 文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body,
      html {
        height: 100%;
      }
      ul li {
        list-style: none;
      }
      li {
        width: 100%;
        line-height: 50px;
        text-align: center;
        border-bottom: 1px solid #8f8e8e;
      }
      a {
        text-decoration: none;
        color: #fff;
      }
      .houtai {
        width: 100%;
        height: 100%;
      }
      .title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        line-height: 60px;
        background-color: #545c65;
        text-align: center;
        z-index: 6;
        color: #fff;
      }
      .menu {
        position: absolute;
        top: 60px;
        left: 0;
        bottom: 0;
        width: 280px;
        background-color: #5c6063;
        z-index: 5;
      }
      .container {
        position: absolute;
        /* top: 60px; */
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #efefef;
        z-index: 2;
      }
      .container > div {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        text-align: center;
        padding-left: 150px;
        line-height: 500px;
        font-size: 30px;
        color: deeppink;
        /* display: none; */
      }
      .footer {
        box-sizing: border-box;
        position: absolute;
        padding-left: 280px;
        width: 100%;
        bottom: 0;
        left: 0;
        line-height: 40px;
        text-align: center;
        background-color: #797d80;
        z-index: 3;
        color: #fff;
      }
      li:hover,
      li:hover > a {
        background-color: #9a9a9a;
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script>
      const App = {
        // 2： <router-view></router-view>就是内容展示的区域
        template: `
        <div class="houtai">
        <div class="title"><h2>英雄联盟 - 后台管理系统</h2></div>
        <div class="menu">
          <ul>
            <li><router-link to="/users">用户管理</router-link></li>
            <li><router-link to="/rights">权限管理</router-link></li>
            <li><router-link to="/goods">商品管理</router-link></li>
            <li><router-link to="/orders">订单管理</router-link></li>
            <li><router-link to="/settings">系统设置</router-link></li>
          </ul>
        </div>
        <div class="container">
          <router-view></router-view>
        </div>
        <div class="footer">
          <span>版权信息</span>
        </div>
      </div>
        `,
      };
      // 0:浏览器访问地址：8.1- Vue Router案例-抽离并渲染App根组件.html#/
      // 1: 改造内容显示区域
      const Users = {
        template: `<div>1： 用户管理页面 - 内容区域 1</div>`,
      };
      const Rights = {
        template: `<div>2： 权限管理页面 - 内容区域 2</div>`,
      };
      const Goods = {
        template: `<div>3： 商品管理页面 - 内容区域 3</div>`,
      };
      const Orders = {
        template: `<div>4： 订单管理页面 - 内容区域 4</div>`,
      };
      const Settings = {
        template: `<div>5： 系统设置页面 - 内容区域 5</div>`,
      };
      // 3：配置路由，点击跳转到对应的页面
      const router = new VueRouter({
        routes: [
          {
            path: '/',
            component: App,
            redirect: '/users',
            children: [
              { path: '/users', component: Users },
              { path: '/rights', component: Rights },
              { path: '/goods', component: Goods },
              { path: '/orders', component: Orders },
              { path: '/settings', component: Settings },
            ],
          },
        ],
      });
      const vm = new Vue({
        el: '#app',
        data: {},
        router,
      });
    </script>
  </body>
</html>
